import React, { PureComponent } from 'react'
import { View, Text, StyleSheet, ScrollView } from 'react-native'
import PropTypes from 'prop-types'
import { HEIGHT, ONE_PIXEL, ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import CheckTag from 'src/components/tag-view/CheckTag'
import CustomButton from 'src/components/button/CustomButton'

export default class FilterView2 extends PureComponent {
  static propTypes = {
    index: PropTypes.number,
    dataArr: PropTypes.array,
    borderTagClick: PropTypes.func,
    activeLabel: PropTypes.string,
    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
    showComplete: PropTypes.bool,
    activeParams: PropTypes.object
  }

  static defaultProps = {
    showComplete: false
  }

  constructor (props) {
    super(props)
    this.state = {
      activeLabel: props.activeLabel
    }
    this.activeParams = props.activeParams
    this.params = this.activeParams
  }

  render () {
    const { style, dataArr, showComplete } = this.props
    const { activeLabel } = this.state
    return (
      <View style={styles.container}>
        <ScrollView style={styles.scrollView}>
          <CustomButton style={[].concat(style)}>
            {
              dataArr.map((item, index) => {
                return (
                  <View style={styles.itemView} key={index}>
                    {
                      !!item.title &&
                      <Text style={[styles.itemTitle, index === 0 && { marginTop: ScaleS(20) }]}>{item.title}</Text>
                    }
                    <View style={styles.itemContentView}>
                      {item.content.map((item, index) => {
                        return (
                          <CheckTag
                            key={index}
                            switchType={'open'}
                            style={[styles.tagView, index % 3 === 0 && { marginLeft: 0 }]}
                            tagLabel={item.label}
                            params={item}
                            isActive={item.label === activeLabel || (activeLabel === '职位' && item.label === '全部')}
                            onPress={this._borderTagClick}/>
                        )
                      })}
                    </View>
                  </View>
                )
              })
            }
          </CustomButton>
        </ScrollView>
        {
          showComplete && (
            <View>
              <View style={styles.line}/>
              <CustomButton style={styles.completeBtnView} onPress={this._completeClick}>
                <Text style={styles.completeText}>完成</Text>
              </CustomButton>
            </View>
          )
        }
      </View>
    )
  }

  _borderTagClick = (isActive, params) => {
    const { borderTagClick, index: filterIndex, showComplete } = this.props
    if (showComplete) {
      this.isActive = isActive
      this.params = params
      this.setState({
        activeLabel: params.label
      })
    } else {
      borderTagClick && borderTagClick(isActive, params, filterIndex)
    }
  }

  _completeClick = () => {
    const { borderTagClick, index } = this.props
    borderTagClick && borderTagClick(this.isActive, this.params, index)
  }
}

const styles = StyleSheet.create({
  container: {
    maxHeight: HEIGHT / 3 * 2
  },
  scrollView: {},
  contentContainer: {},
  itemView: {},
  itemTitle: {
    color: '#3C3C3C',
    fontSize: ScaleT(16),
    fontWeight: '500',
    marginTop: ScaleS(45)
  },
  itemContentView: {
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  tagView: {
    marginLeft: ScaleS(15),
    marginTop: ScaleS(24)
  },
  tagText: {
    color: '#666666',
    fontSize: ScaleT(14),
    fontWeight: '400'
  },
  line: {
    backgroundColor: 'rgba(0,0,0,0.2)',
    height: ONE_PIXEL
  },
  completeBtnView: {
    height: ScaleS(52),
    alignItems: 'center',
    justifyContent: 'center'
  },
  completeText: {
    color: '#000000',
    fontSize: ScaleT(17),
    fontWeight: '400'
  }
})
